<template>
	<base-page title="更换银行卡" backgroundColor="white">
		<view class="p-16 fs-14 text-color-regular">
			<view>
				<view class="flex item-center">
					<text class="mr-8 flex-shrink" style="width:80px;">账户名称：</text>
					<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20"
						placeholder="请输入账户名称" placeholder-class="text-color-hint"  v-model="formData.cardName"/>
				</view>
				<view class="fs-12 text-color-hint leading-17 mt-8" style="margin-left:84px;color:rgba(0, 0, 0, 0.30);">
					请填写与入驻时提供的身份证一致的银行卡信息</view>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行卡号：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20"
					placeholder="请输入银行卡号" placeholder-class="text-color-hint"  v-model="formData.cardNo"/>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行所在地：</text>
				<picker
					class="flex-1 h-36 text-color-regular bg-default radius-12 px-12"
					style="line-height:36px;"
					mode="multiSelector"
					range-key="localName"
					@columnchange="onnodeclick"
					:range="[provinceList, cityList]"
					@change="onchange"
				>
					<view :style="{color:formData.bankProvinceName?'':'#A5A7A9'}"
						class="flex item-center justify-between">
						<text> {{formData.bankProvinceName ?
						formData.bankProvinceName + (formData.bankCityName ? '/' + formData.bankCityName : '')
						: '请选择银行卡所在地'}}</text>
						<image class="w-6 h-12 ml-4" src="@/static/svg/arrow-stroke.svg"></image>
					</view>
				</picker>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">手机号：</text>
				<input disabled :value="mobile"
					class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20"
					placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">验证码：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20"
					placeholder="请输入短信验证码" placeholder-class="text-color-hint" v-model="formData.smsCode" />
				<!-- <view class="flex-shrink ml-8 inline-flex center bg-secondary-info radius-4 h-25 px-8 leading-17 fs-12 text-white">发送验证码</view> -->
				<button type="primary"
					class="get-code-btn"
					@click="getCode" :class="{'unactive':codeTime>0}"
					:disabled="codeTime>0">{{codeTime>0? codeTime+'s' :'发送验证码'}}</button>
			</view>
		</view>

		<template #footer>
			<view class="m-12 bg-primary radius-8 flex center h-46 fs-16 text-white"
				:style="disableSubmit?'opacity: 0.3;':''" @click="submit">确认</view>
		</template>
	</base-page>
</template>

<script setup name="ChangeBankCard">
	import {
		computed,
		ref,
		onMounted,
		onBeforeUnmount,
		getCurrentInstance
	} from 'vue'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import {
		sendSms,
		updateBankInfo
	} from '../api/withdrawal.js'
	import { listHfAllRegionApi } from '@/api/common.js'
	import { useWithdrawStore } from '@/stores/modules/withdraw.js'
	const withdrawStore = useWithdrawStore()
	const codeTime = ref(null)
	const codeFn = ref(null)
	const instance = getCurrentInstance()
	const formData = ref({
		bankCityCode: '', // 银行所在地市code
		bankCityName: '', // 银行所在地市名称
		bankProvinceCode: '', // 银行所在地省份code
		bankProvinceName: '', // 银行所在地省份名称
		cardName: '', // 持卡人姓名
		cardNo: '' ,// 银行卡号
		smsCode:'',//短信验证码
	})
	const disableSubmit = computed(() => {
		return !(formData.value.cardName && formData.value.cardNo && formData.value.bankProvinceName && formData.value.smsCode)
	})
	const userStore = useUserStore()
	const mobile = computed(() => {
		return userStore.userInfo.mobile.replace(userStore.userInfo.mobile.substring(3, 7), "****")
	})
	const provinceList = ref([])
	const getProvinces = () => {
		getHfRegionsByIdApi(0).then(res => {
			provinceList.value = res
		})
	}
	const cityList = ref([])
	const getAllRegion = () => {
		listHfAllRegionApi().then(res => {
			provinceList.value = res
			if (res && res.length) {
				cityList.value = res[0].regions || []
			}
		})
	}
	const onchange = ({ detail }) => {
		if (detail.value) {
			formData.value.bankProvinceName = provinceList.value[detail.value[0]].localName
			formData.value.bankProvinceCode = provinceList.value[detail.value[0]].code
			if (cityList.value && cityList.value.length) {
				formData.value.bankCityName = cityList.value[detail.value[1]].localName
				formData.value.bankCityCode = cityList.value[detail.value[1]].code
			} else {
				formData.value.bankCityName = ''
				formData.value.bankCityCode = ''
			}
		}
	}
	const onnodeclick = ({ detail }) => {
		if (detail.column === 0) {
			const province = provinceList.value[detail.value]
			cityList.value = province.regions || []
		}
	}
	// 获取短信验证码
	const getCode = async () => {
		if (codeTime.value > 0) {
			return
		}
		uni.showLoading()
		let result = await sendSms({
			mobile: userStore.userInfo.mobile,
			type: 5
		})
		if (result) {
			uni.showToast({
				icon: 'none',
				title: '短信已发送，请注意查收'
			})
			codeTime.value = 60
			codeFn.value = setInterval(() => {
				if (codeTime.value <= 0) {
					clearInterval(codeFn.value)
					codeFn.value = null
					codeTime.value = null
				} else {
					codeTime.value = codeTime.value - 1
				}
			}, 1000)
		}
		uni.hideLoading()
	}
	onBeforeUnmount(() => {
		// 退出页面更新为已读状态
		if(codeFn.value){
			clearInterval(codeFn.value)
			codeFn.value = null
			codeTime.value = null
		}
	})
	const submit =  () => {
		updateBankInfo(formData.value).then(res => {
			// 已签约
			const eventChannel = instance.ctx.getOpenerEventChannel()
			eventChannel.emit('onChangeSuccess', { result: true })
			withdrawStore.getAgentEnterApplyListBank()
			withdrawStore.getAgentEnterState()
			uni.showToast({
				icon: 'none',
				title: '修改成功'
			})
			uni.navigateBack()
		}).catch(err =>{
			uni.showToast({
				icon: 'none',
				title: err.message
			})
		})
	}
	onMounted(() => {
		getAllRegion()
	})
</script>
<style scoped lang="scss">
	.get-code-btn {
		width: 200rpx;
		background: #00AEFF;
		height: 25px;
		line-height: 25px;
		// margin-bottom: 20px;
		font-size: 28rpx;
		margin-right: 0;
		margin-left: 10px;

		&.unactive {
			background: #0ac6ff!important;
		}
	}
</style>